<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智联职位信息</title>
</head>
<link href="../page/layui/css/modules/laydate/laydate.css" rel="stylesheet">
<link href="../page/layui/css/modules/layer/default/layer.css" rel="stylesheet">
<link href="../page/layui/css/modules/code.css" rel="stylesheet">
<link href="../page/layui/css/layui.css" rel="stylesheet">
<link href="../page/layui/css/layui.mobile.css" rel="stylesheet">
<script src="../page/layui/config.js"></script>
<style>
    .selects{width: 120px;float: left; margin: 3px 3px}
</style>
<body>
<form class="layui-form" action="">
    <div style="width: 80%;margin: 5px auto">
        <div class="selects">
            <select name="city"  lay-filter="city" lay-verify="" lay-search>
                <option value="">请选择地点</option>
                <option value="">无</option>
                <option value="上海">上海</option>
                <option value="北京">北京</option>
                <option value="深圳">深圳</option>
            </select>
        </div>
        <div class="selects">
            <select name="gz"  lay-filter="city" lay-verify="" lay-search>
                <option value="">工资区间</option>
                <option value="">无</option>
               <option value="1&st=1000"> 1000元/月以下    </option>
               <option value="1001&st=2000"> 1001-2000元/月   </option>
               <option value="2001&st=4000"> 2001-4000元/月   </option>
               <option value="4001&st=6000"> 4001-6000元/月   </option>
               <option value="6001&st=8000"> 6001-8000元/月   </option>
               <option value="8001&st=10000"> 8001-10000元/月  </option>
               <option value="10001&st=15000"> 10001-15000元/月</option>
               <option value="15001&st=20000"> 15001-20000元/月</option>
               <option value="20001&st=30000"> 20001-30000元/月</option>
               <option value="30001&st=50000"> 30001-50000元/月</option>
               <option value="50000&st=99999"> 50000元/月以上   </option>
            </select>
        </div>
        <div class="selects">
            <select name="xl"  lay-filter="city" lay-verify="" lay-search>

                <option value="-1"> 不限			        </option>
                <option value="-2"> 无学历要求		        </option>
                <option value="7"> 高中/中专/中技及以下	</option>
                <option value="5"> 大专及同等学历		    </option>
                <option value="4"> 本科/学士及等同学历	    </option>
                <option value="3"> 硕士/研究生及等同学历	</option>
                <option value="1"> 博士及以上		        </option>
                <option value="8"> 其他			        </option>
            </select>
        </div>
        <div class="selects">
            <input type="text" name="zw" required lay-verify="" placeholder="请输入职位" autocomplete="off" class="layui-input">
        </div>
        <div class="selects">
            <button lay-submit lay-filter="submit" class="layui-btn">Serch</button>
        </div>

    </div>
</form>

<div id="view" style="width: 80%;margin: 0px auto"></div>

<div id="page" style="width: 550px; margin: 0px auto"></div>
</body>

<script src="../page/jquery-1.10.1.min.js"></script>
<script src="../page/layui/lay/dest/layui.all.js"></script>
<script src="../page/layui/layui.js"></script>
<script src="../page/layui/lay/modules/laytpl.js"></script>

<script id="table" type="text/html">
    <table class="layui-table">
        <!--<colgroup>-->
            <!--<col width="150">-->
            <!--<col width="200">-->
            <!--<col>-->
        <!--</colgroup>-->
        <thead>
        <tr>
            <th>职位名称</th>
            <th>反馈率</th>
            <th>公司名称</th>
            <th>月薪</th>
            <th>工作地点</th>
            <th>发布日期</th>
        </tr>
        </thead>
        <tbody>
        {{#  layui.each(d, function(index, item){ }}
        <tr>
            <td><a href="{{ item.jobHref }}">{{ item.job }}</a> </td>
            <td>{{ item.fk_lv }}</td>
            <td><a href="{{ item.gsmcHref==''?#:item.gsmcHref  }}">{{ item.gsmc }}</a></td>
            <td>{{ item.zwyx }}</td>
            <td>{{ item.gzdd }}</td>
            <td>{{ item.gxsj }}</td>
        </tr>
        {{#  }); }}
        {{#  if(d.length === 0){ }}
        <td colspan="6">无数据</td>
        {{#  } }}
        </tbody>
    </table>
</script>
<script>
    var dataAll;
    var pageCount = 10;
    var dataList = [];
    var citys="";
    var kw="";
    var sf = "";
    var el = "";
    var we="";
    $(function(){
        initDate("","","");
    });



function initDate(gz,xl,zw) {
    var index = layer.load(2, {
        shade: [0.5,'#000'] //0.1透明度的白色背景
    });
    $.ajax({
           url:host+'/monitor/bi/getZl.action?pageNo=1',
//        url:'json.json',
        type:'GET',
        async:true,    //或false,是否异步
        data:{gz:gz,xl:xl,zw:zw},
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data){
            dataAll = data.result;
            dataList.splice(0,dataList.length);
            for(var i=0;i>=0;i+=pageCount){
                var tempList = dataAll.slice(i,dataAll.length);
                if(tempList.length<=pageCount){
                    dataList.push(tempList);
                    break;
                }else{
                    var objList = dataAll.slice(i,i+pageCount);
                    dataList.push(objList);
                }

            }

            initPage(dataAll.length%pageCount==0?dataAll.length/pageCount:dataAll.length/pageCount+1);
            layer.close(index);
        }
    });
}
function loadDate(list) {
    layui.use('laytpl', function(){
        var laytpl = layui.laytpl;
        var getTpl = table.innerHTML;
        laytpl(getTpl).render(list, function(html){
            view.innerHTML = html;
        });
    });

}
function initPage(pages) {
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        laypage({
            cont: 'page'
            ,pages: pages //总页数
            ,groups: 5 //连续显示分页数
            ,jump: function(obj, first){
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                loadDate(dataList[curr-1]);
            }
        });
    });
}

    layui.use('form', function() {
        var form = layui.form();
        form.on('select(city)', function(data){
            console.log(data.value); //得到被选中的值

        });
        form.on('submit(submit)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var formDate = data.field;
            var gz = formDate.gz;
            var xl = formDate.xl;
            var zw = formDate.zw;
            initDate(gz,xl,zw);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

</html>